<template>
  <div class="login">
    <div id="mydiv"></div>
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-tabs
        default-active-key="tab1"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
      >
        <a-tab-pane key="tab1" tab="账号密码登录">
          <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="账户: admin"
              v-decorator="[
                'userName',
                {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }], validateTrigger: 'blur'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input-password
              size="large"
              placeholder="密码: 123"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input-password>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="state.loginBtn"
          :disabled="state.loginBtn"
        >确定</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { login } from '@/request/api'
import md5 from 'md5'
export default {
  name: 'Login',
  components: {
  },
  data () {
    return {
      form: this.$form.createForm(this),
      state: {
        loginBtn: false,
        smsSendBtn: false
      }
    }
  },
  mounted () {
    var config = {
      vx: 4,	//小球x轴速度,正为右，负为左
      vy: 4,	//小球y轴速度
      height: 2,	//小球高宽，其实为正方形，所以不宜太大
      width: 2,
      count: 100,		//点个数
      color: "121, 162, 185", 	//点颜色
      stroke: "220,255,255", 		//线条颜色
      dist: 6000, 	//点吸附距离
      e_dist: 20000, 	//鼠标吸附加速距离
      max_conn: 50 	//点到点最大连接数
    }
    //调用
    this.canvasInit(config)
  },
  methods: {
    getElementByTag (name) {
      return document.getElementsByTagName(name)
    },
    // 设置canvas大小
    canvasSize (canvas) {
      // 获取特定div的宽高
      var width = document.getElementById('mydiv').style.width
      var height = document.getElementById('mydiv').style.height
      width = parseInt(width)
      height = parseInt(height)
      canvas.width = width || window.innerWeight || document.documentElement.clientWidth || document.body.clientWidth
      canvas.height = height || window.innerWeight || document.documentElement.clientHeight || document.body.clientHeight
    },
    // 画线
    drawLine (context, canvas, mouse) {
      context = context || canvas.context
      for(var i = 0, len = canvas.config.count; i < len; i++){
        // 初始化最大连接数
        canvas.points[i].max_conn = 0
        // point to point
        var dist
        for(var j = 0; j < len; j++){
          if(i != j){
            dist = Math.round(canvas.points[i].x - canvas.points[j].x) * Math.round(canvas.points[i].x - canvas.points[j].x) + 
            Math.round(canvas.points[i].y - canvas.points[j].y) * Math.round(canvas.points[i].y - canvas.points[j].y);
            // 两点距离小于吸附距离，而且小于最大连接数，则画线
            if (dist <= canvas.config.dist && canvas.points[i].max_conn <canvas.config.max_conn) {
              canvas.points[i].max_conn++
              // 距离越远，线条越细，而且越透明
              context.lineWidth = 0.5 - dist / canvas.config.dist
              context.strokeStyle = 'rgba('+ canvas.config.stroke + ','+ (1 - dist / canvas.config.dist) +')'
              context.beginPath()
              context.moveTo(canvas.points[i].x, canvas.points[i].y)
              context.lineTo(canvas.points[j].x, canvas.points[j].y)
              context.stroke()

            }
          }
        }
        // 如果鼠标进入画布
        // point to mouse
        if (mouse) {
          dist = Math.round(canvas.points[i].x - mouse.x) * Math.round(canvas.points[i].x - mouse.x) + 
          Math.round(canvas.points[i].y - mouse.y) * Math.round(canvas.points[i].y - mouse.y)
          // 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果
          if (dist > canvas.config.dist && dist <= canvas.config.e_dist) {
            canvas.points[i].x = canvas.points[i].x + (mouse.x - canvas.points[i].x) / 20
            canvas.points[i].y = canvas.points[i].y + (mouse.y - canvas.points[i].y) / 20
          }
          if (dist <= canvas.config.e_dist) {
            context.lineWidth = 1
            context.strokeStyle = 'rgba('+ canvas.config.stroke + ','+ (1 - dist / canvas.config.e_dist) +')'
            context.beginPath()
            context.moveTo(canvas.points[i].x, canvas.points[i].y)
            context.lineTo(mouse.x, mouse.y)
            context.stroke()
          }
        }
      }
    },
    // 边界处理
    borderPoint (point, canvas) {
      var p = point
      if (point.x <= 0 || point.x >= canvas.element.width) {
        p.vx = -p.vx
        p.x += p.vx
      } else if (point.y <= 0 || point.y >= canvas.element.height) {
        p.vy = -p.vy
        p.y += p.vy
      } else {
        p = {
          x: p.x + p.vx,
          y: p.y + p.vy,
          vx: p.vx,
          vy: p.vy
        }
      }
      return p
    },
    // 画点
    drawPoint (canvas) {
      var context = canvas.context,
      point,
      dist
      context.clearRect(0, 0, canvas.element.width, canvas.element.height)
      context.beginPath()
      context.fillStyle = 'rgb('+ canvas.config.color +')'
      for (var i = 0, len = canvas.config.count; i < len; i++) {
        if (canvas.points.length != canvas.config.count) {
          // 初始化所有点
          point = {
            x: Math.floor(Math.random() * canvas.element.width),
            y: Math.floor(Math.random() * canvas.element.height),
            vx: canvas.config.vx / 2 - Math.random() * canvas.config.vx,
            vy: canvas.config.vy / 2 - Math.random() * canvas.config.vy
          }
        } else {
          // 处理球的速度和位置，并且做边界处理
          point =	this.borderPoint(canvas.points[i], canvas)
        }
        context.fillRect(point.x - canvas.config.width / 2, point.y - canvas.config.height / 2, canvas.config.width, canvas.config.height)

        canvas.points[i] = point
      }
      this.drawLine(context, canvas, canvas.mouse)
      context.closePath()
    },
    // 根据传入的config初始化画布
    canvasInit (canvasConfig) {
      canvasConfig = canvasConfig || {}
      var html = this.getElementByTag('html')[0]
      // 获取body作为背景
      // var body = getElementByTag("body")[0];

      // 获取特定div作为背景
      // mydiv是你想要将其作为背景的div的ID
      var body = document.getElementById('mydiv')
      var canvasObj = document.createElement('canvas')
      var canvas = {
        element: canvasObj,
        points : [],
        // 默认配置
        config: {
          vx: canvasConfig.vx || 4,
          vy:  canvasConfig.vy || 4,
          height: canvasConfig.height || 2,
          width: canvasConfig.width || 2,
          count: canvasConfig.count || 100,
          color: canvasConfig.color || "121, 162, 185",
          stroke: canvasConfig.stroke || "130,255,255",
          dist: canvasConfig.dist || 6000,
          e_dist: canvasConfig.e_dist || 20000,
          max_conn: 10
        }
      }
      // 获取context
      if (canvas.element.getContext('2d')) {
        canvas.context = canvas.element.getContext('2d')
      } else {
        return null
      }

      body.style.padding = '0'
      body.style.margin = '0'
      body.appendChild(canvas.element)

      canvas.element.style = 'position: fixed; top: 0; left: 0; z-index: -1'
      this.canvasSize(canvas.element)
      window.onresize = () => {
        this.canvasSize(canvas.element)
      }
      body.onmousemove = (e) => {
        var event = e || window.event
        canvas.mouse = {
          x: event.clientX,
          y: event.clientY
        }
      }
      document.onmouseleave = () => {
        canvas.mouse = undefined
      }
      setInterval(() => {
        this.drawPoint(canvas)
      }, 40)
    },
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state
      } = this

      state.loginBtn = true
      validateFields({ force: true }, (err, values) => {
        if (!err) {
          values.password = md5(values.password)
          login(values).then(res => {
            if (res.message === '登录成功') {
              sessionStorage.setItem('USER_DATA', JSON.stringify(res.data))
              this.$router.push({ name: 'Home' })
              setTimeout(() => {
                this.$message.success('欢迎登录')
              }, 2000)
            } else {
              this.$message.error('用户名或密码错误')
              state.loginBtn = false
            }
          })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background: #f0f2f5 url(../../assets/img/bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  #mydiv {
    height: 500px;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
  }
  .user-layout-login {
    min-width: 260px;
    width: 368px;
    margin: 0 auto;
    z-index: 10;
    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }
  }
}
</style>
